import { Text } from 'react-native';
import {
  GestureHandlerRootView,
  InterceptingGestureDetector,
  Pressable,
  VirtualGestureDetector,
  useTapGesture,
} from 'react-native-gesture-handler';

export default function Reproduction() {
  const innerTap = useTapGesture({
    onActivate: () => {
      'worklet';
      console.log('RNGH: Inner onPress');
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable
        style={{ width: 100, height: 100, backgroundColor: 'pink' }}
        onPress={() => console.log('RNGH: Pressable onPress')}>
        <InterceptingGestureDetector>
          <Text>
            Outer{' '}
            <VirtualGestureDetector gesture={innerTap}>
              <Text>Inner</Text>
            </VirtualGestureDetector>
          </Text>
        </InterceptingGestureDetector>
      </Pressable>
    </GestureHandlerRootView>
  );
}